import EmailIcon from "@src/assets/e-mail.svg?react";
import PsdIcon from "@src/assets/psd.svg?react";
import VerificationCodeIcon from "@src/assets/verification-code.svg?react"
import {Link, useNavigate} from "react-router-dom";
import {Formik, FormikProps} from "formik";
import * as Yup from "yup";
import FormInputIcon from "@src/pages/logIn/_components/formInputIconProps";
import VerifyCodeButton from "@src/pages/logIn/_components/verifyCodeButton";
import {useState} from "react";
import {useRequest} from "ahooks";
import {resetPassword, resetPasswordCode} from "@src/services/userinfo.ts";
import toast from 'react-hot-toast';
export default function ResetPasswords() {
    interface RegisterFromType {
        email: string;
        password: string;
        newPassword: string;
        verificationCode: string;
    }

    const initialValues: RegisterFromType = {
        email: "",
        password: "",
        newPassword: "",
        verificationCode: ""
    }
    const navigate = useNavigate();
    const [disabled, setDisabled] = useState(false);
    const resetPasswordCodeApi = useRequest(resetPasswordCode, {manual: true});
    const resetPasswordApi = useRequest(resetPassword, {manual: true});
    return (<div className="card content">
            <h1 className="logo">忘记密码</h1>
            <Formik initialValues={initialValues}
                    validationSchema={Yup.object({
                        email: Yup.string().required('必填').email('无效的电子邮件地址').matches(/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/, '无效的电子邮件地址'),
                        password: Yup.string().required('必填').min(6, "密码长度必须大于6"),
                        newPassword: Yup.string().required('必填').test(
                            'password-match',
                            '密码不一致',
                            function (value) {
                                // this 是当前字段的上下文，可以访问其他字段
                                return this.parent.password === value;
                            }
                        ),
                        verificationCode: Yup.string().required('必填'),
                    })}
                    onSubmit={(values) => {
                        resetPasswordApi.runAsync(values.email, values.password, values.verificationCode).then((data) => {
                            toast(data.message)
                            navigate("/logIn");
                        })

                    }}>
                {(formik: FormikProps<RegisterFromType>) => (

                    <form onSubmit={formik.handleSubmit} className="from">

                        <FormInputIcon
                            Icon={<EmailIcon/>}
                            name="email"
                            placeholder="请输入邮箱"
                            formik={formik}
                            type="email"
                        />
                        <FormInputIcon
                            Icon={<PsdIcon/>}
                            name="password"
                            placeholder="请输入密码"
                            formik={formik}
                            type="password"
                        />
                        <FormInputIcon
                            Icon={<PsdIcon/>}
                            name="newPassword"
                            placeholder="请确认密码"
                            formik={formik}
                            type="password"
                        />


                        <div className="verification-code">
                            <FormInputIcon
                                Icon={<VerificationCodeIcon/>}
                                name="verificationCode"
                                placeholder="请输入验证码"
                                formik={formik}
                            />
                            <VerifyCodeButton onGetCode={() => {
                                formik.setFieldTouched("email", true).then((value) => {
                                    if (value?.email == undefined) {
                                        resetPasswordCodeApi.runAsync(formik.values.email).then(() => setDisabled(true))
                                    }
                                })
                            }} disabled={disabled} setDisabled={setDisabled}></VerifyCodeButton>
                        </div>

                        <button type="submit" className="z-button">重置密码</button>
                    </form>

                )}

            </Formik>

            <p>已有账户? <Link to="/logIn/register">立即登录</Link></p>
        </div>
    )
}